<template>
    <div>
        <LogoSearch/>
            <!-- 内容区 -->
            <div class="main-wrap clearfix">
                <TypeNav/>
                <div class="mianbody">
                    <!-- 路径导航 -->
                    <div class="path-nav">
                        <a href="">首页</a>&gt;<a href="">北京</a>
                    </div>
                    <!-- 标题详情 -->
                    <div class="titledetail">
                        <h1>宝屋日料</h1>
                        <div class="rankInfo">
                            ⭐⭐⭐⭐⭐
                            <span>1657条评价</span>
                            <span>人均：1313元</span>
                            <span>口味：4.90</span>
                            <span>环境：4.90</span>
                            <span>服务：4.90</span>
                        </div>
                        <!-- 地址 -->
                        <div class="address">
                            地址：南三里屯路1号楼通赢中心3层
                        </div>
                        <!-- 电话 -->
                        <div class="tel">
                            电话：15101128857
                        </div>
                        <a href="javascript:;" class="btn">查看商家详情</a>
                    </div>
                    <!-- 附近商户推荐 -->
                    <div class="recommend">
                        <div class="title">附近商户推荐</div>
                        <!-- 商户卡片 -->
                        <div class="shopCard" v-for="(item,index) in nearByShops" :key="index">
                            <img :src="item.picUrl" style="width: 93px;height: 69px; float: left;">
                            <div class="shopCardInfo">
                                <span class="h">{{item.shopName}}</span>
                                <span class="c">⭐⭐⭐⭐⭐</span>
                                <div class="bottom">
                                    <div class="left">三里屯/工体</div>
                                    <div class="right">人均￥143</div>
                                </div>
                            </div>
                        </div>
                        <div class="line"></div>
                        <div class="more">
                            <span class="l">查看更多</span>
                            <span class="r">&gt;</span>
                        </div>
                    </div>
                    <!-- 表单 -->
                    <div class="comment">
                        <h1>我要评价</h1>
                        <!-- 评价类型 -->
                        <div class="conmenttype">	
                            <ul>
                                <li>总价<i style="color: red;">*</i><span>⭐⭐⭐⭐⭐</span></li>
                                <li>口味<i style="color: red;">*</i><span>⭐⭐⭐⭐⭐</span></li>
                                <li>环境<i style="color: red;">*</i><span>⭐⭐⭐⭐⭐</span></li>
                                <li>服务<i style="color: red;">*</i><span>⭐⭐⭐⭐⭐</span></li>
                                <li>食材<i style="color: red;">*</i><span>⭐⭐⭐⭐⭐</span></li>
                            </ul>
                        </div>
                        <!-- 文本框 -->
                        <div class="textdetail">
                            <div class="ahead">评价<i style="color: red;">*</i></div>
                            <!-- <textarea class="textarea" v-model="textcontent" placeholder="亲，菜品的口味如何，环境怎么样，服务满意吗，食材新鲜吗？"></textarea> -->
								<quill-editor ref="text"
									v-model="content"
									class="myQuillEditor"
									:options="editorOption" />
						    </div>
                        <!-- 上传 -->
                        <div class="upload clearfix">
                            <div class="disc">
                                图片/视频
                            </div>
                            <div class="btnArea">
                                <div class="upPic">
                                    <button type="button" class="picBtn">上传图片</button>
                                    <div class="upPicDesc">单张图片不超过10MB，尺寸不小于300*300px，支持jpg、png和bmp格式</div>
                                </div>
                                <button type="button" class="upVideo">上传视频</button>
                            </div>
                        </div>
                        <!-- 人均消费 -->
                        <div class="avg clearfix">
                            <div class="avgTitle">人均</div>
                            <div class="avgInput">
                                <input name="avg" type="number" v-model="avgMoney"/>元
                            </div>
                        </div>
                        <!-- 喜欢的菜 -->
                        <div class="like clearfix">
                            <div class="likeTitle">
                                喜欢的菜
                            </div>
                            <div class="likeContent">
                                <span>鹅肝寿司</span>
                                <span>碳烤和牛</span>
                            </div>
                        </div>
                        <!-- 警告 -->
                        <div class="warning">
                            评价和打分都将是其他网友的参考依据，并影响该商户评价。请发布真实、客观的本人消费体验评价。如您收到威逼、利诱如优惠等干扰而发布的评价或并非本人体验的虚假/恶意评价，则评价视为违规，同时影响您的信誉度。
                        </div>
                        <!-- 提交按钮 -->
                        <div class="sub">
                            <a href='javascript::' @click="submitComment">提交评价</a>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import { reqgetDetailList } from '../../api'
export default {
  name: "Evaluate",
  data(){
	  return {
		  textcontent:'',
		  avgMoney:'',
      id:'FPcwD2D5x1QfVFoQ',
      nearByShops:[],
      content: '',
	  editorOption: {
        theme: 'snow', // or 'bubble'
        placeholder: '您想说点什么？',
	  }
	}
  },
  mounted(){
    this.getNearByShops();
  },
  methods:{
    
	submitComment(){
    let commentObj = {
      content:this.textcontent,
      avgPrice:this.avgMoney
    }
    //判断本地存储，取出转译为数组
    if(localStorage.getItem('pingjia')){
      let pingjia = JSON.parse(localStorage.getItem('pingjia'))
      pingjia.push(commentObj)
      localStorage.setItem('pingjia',JSON.stringify(pingjia))
    }else{
      let commentArr = []
      commentArr.push(commentObj)
      localStorage.setItem('pingjia', JSON.stringify(commentArr));
    }
    this.$router.push('/detail')

	},  
    async getNearByShops(){
      const {id} = this.id;
      let res = await reqgetDetailList(id)
      console.log(res)
      if(res.code == 200){
        this.nearByShops = res.data.data[0].asideModel.nearByFoodShops
      }
    }
  },
  components:{
	  quillEditor
  }
};
</script>

<style lang="css" scoped>
.clearfix:after,.clearfix:before{
	content: "";
	display: table;
}
.clearfix:after{
	clear: both;
}
.clearfix{
	*zoom: 1;
}
/* ————————————————
版权声明：本文为CSDN博主「h_qingyi」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/h_qingyi/article/details/81269667 */
.main-wrap{
	height: 1080px;
	width: 100%;
	background-color: #f6f6f6;
}
.main-wrap .mianbody{
	width: 1200px;
	margin: 0 auto;
	background-color: #fff;
}
.main-wrap .mianbody .path-nav{
	padding:15px 0;
	font-size: 12px;
	background-color: #f6f6f6;
}
.main-wrap .mianbody .titledetail{
	width: 870px;
	height: 170px;
	background-color: #fff;
	float: left;
	margin-right: 10px;
	padding: 17px 20px 0;
	box-sizing: border-box;
	font-size: 18px;
	position: relative;
}
.main-wrap .mianbody .titledetail .rankInfo{
	margin-top: 12px;
	font-size: 14px;
	color: #666;
}
.main-wrap .mianbody .titledetail .rankInfo span{
	margin-left: 20px;
}
.main-wrap .mianbody .titledetail .address{
	margin-top: 12px;
	font-size: 14px;
	color: #666;
	margin-top: 12px;
}
.main-wrap .mianbody .titledetail .tel{
	margin-top: 12px;
	font-size: 14px;
	color: #666;
	margin-top: 12px;
}
.main-wrap .mianbody .titledetail .btn{
	display: block;
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 120px;
	height: 34px;
	line-height: 34px;
	background: #f63;
	border-radius: 2px;
	font-size: 16px;
	color: #fff;
	text-align: center;
	text-decoration: none;
}
.main-wrap .mianbody .titledetail a:hover{
	color: #fff;
}
/* 附近商户推荐 */
.main-wrap .mianbody .recommend{
	width: 320px;
	float: right;
	background-color: #fff;
	padding:15px 20px;
	box-sizing: border-box;
	font-size: 18px;
}
.main-wrap .mianbody .recommend .title{
	  font-size: 16px;
		font-weight: 700;
	  color: #111;
	  margin-top: 5px;
	  margin-bottom: 23px;
	  line-height: 21px;
}
.main-wrap .mianbody .recommend .shopCard{
	height: 69px;
	margin-bottom: 10px;
}
.main-wrap .mianbody .recommend .shopCard .shopCardInfo{
	width: 170px;
	font-size: 14px;
	margin-left: 10px;
	float: left;
	overflow: hidden;
	text-overflow: ellipsis;
}
.main-wrap .mianbody .recommend .shopCard .shopCardInfo .h{
	white-space: nowrap;
}
.main-wrap .mianbody .recommend .shopCard .shopCardInfo .c{
	font-size: 12px;
}
.main-wrap .mianbody .recommend .shopCard .shopCardInfo .bottom {
	color: #ddd;
	font-size: 12px;
	margin-top: 5px;
	height: 20px;
}
.main-wrap .mianbody .recommend .shopCard .shopCardInfo .bottom .left{
	float: left;
}
.main-wrap .mianbody .recommend .shopCard .shopCardInfo .bottom .right{
	float: right;
}
.main-wrap .mianbody .recommend .line{
	width: 280px;
	margin: 10px auto;
	border-bottom: 1px solid #aaa;
}
.main-wrap .mianbody .recommend .more{
	width: 280px;
	height: 20px;
	font-size: 14px;
	color: #666;
	line-height: 20px;
	margin: 5px auto;
}
.main-wrap .mianbody .recommend .more .l{
	float: left;
}
.main-wrap .mianbody .recommend .more .r{
	float: right;
}
/* 评论区样式 */
.main-wrap .mianbody .comment{
	width: 870px;
	height: 700px;
	background: url(../../assets/evaluate/ercodef.png) no-repeat right top #fff;
	float: left;
	margin-top: 10px;
	margin-right: 10px;
	padding: 24px 60px 46px 20px;
	box-sizing: border-box;
}
.main-wrap .mianbody .comment h1{
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 17px;
}
.main-wrap .mianbody .conmenttype{
	width: 790px;
	background-color: #fff;
}
.main-wrap .mianbody .conmenttype ul{
	padding-left: 66px;
}
.main-wrap .mianbody .conmenttype ul li{
	text-align: left;
	font-size: 14px;
	height: 20px;
	/* width: 100px; */
	line-height: 20px;
	margin: 15px;
}
.main-wrap .mianbody .conmenttype ul li span{
	padding-left: 10px;
}
/* 文本框 */
.main-wrap .mianbody .comment .textdetail{
	height: 160px;
}
.main-wrap .mianbody .comment .textdetail .ahead{
	width: 100px;
	height: 20px;
	font-size: 14px;
	text-align: right;
	line-height: 20px;
	padding-left: 16px;
	padding-right: 10px;
	float: left;
}
.main-wrap .mianbody .comment .textdetail .textarea{
	float: left;
	width: 600px;
	height: 154px;
}
/* 上传按钮子 */
.main-wrap .mianbody .comment .upload{
	margin-top: 10px;
	width: 100%;
	margin-bottom: 10px;
}
.main-wrap .mianbody .comment .upload .disc{
	float: left;
	width: 80px;
	height: 61px;
	text-align: right;
	padding-left: 30px;
	margin-right: 16px;
	font-size: 14px;
}
.main-wrap .mianbody .comment .upload .btnArea{
	float: left;
	
}
.main-wrap .mianbody .comment .upload .btnArea .upPicDesc{
	height: 24px;
	line-height: 24px;
	font-size: 12px;
	color: #666;
	white-space: nowrap;
	margin-bottom: 10px;
	padding-left: 10px;
	float: left;
}
.main-wrap .mianbody .comment .upload .btnArea .upPic{
	width: 100%;
	float: left;
}
.main-wrap .mianbody .comment .upload .btnArea .upPic .picBtn{
	float: left;
	margin-bottom: 10px;
}
.main-wrap .mianbody .comment .upload .btnArea button{
	display: block;
	float: left;
	background-color: #FFFFFF;
	color: #f63;
	border: 1px solid #f63;
	width: 80px;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	text-align: center;
}
/* 人均消费 */
.main-wrap .mianbody .comment .avg{
	font-size: 14px;
}
.main-wrap .mianbody .comment .avg .avgTitle{
	float: left;
	width: 80px;
	height: 31px;
	text-align: right;
	padding-left: 30px;
	margin-right: 16px;
	font-size: 14px;
}
.main-wrap .mianbody .comment .avg .avgInput{
	float: left;
}
.main-wrap .mianbody .comment .avg .avgInput input{
	border: 1px solid #aaa;
	width: 60px;
	height: 20px;
	margin-right: 10px;
}
/* 喜欢的菜 */
.main-wrap .mianbody .comment .like{
	width: 100%;
	font-size: 14px;
}
.main-wrap .mianbody .comment .like .likeTitle{
	float: left;
	width: 80px;
	height: 31px;
	text-align: right;
	padding-left: 30px;
	margin-right: 16px;
	font-size: 14px;
}
.main-wrap .mianbody .comment .like .likeContent{
	float: left;
}
.main-wrap .mianbody .comment .like .likeContent span{
	float: left;
	display: block;
	border-radius: 2px;
	border: 1px solid #eee;
	margin-right: 10px;
}
/* 警告 */
.main-wrap .mianbody .comment .warning{
	width: 690px;
	height: 54px;
	padding: 10px;
	background: #f6f6f6;
	font-size: 12px;
	line-height: 17px;
	color: #999;
	margin-left: 126px;
	margin-bottom: 16px;
}
.main-wrap .mianbody .comment .sub{
	width: 690px;
	margin-left: 126px;
	height: 50px;
}
.main-wrap .mianbody .comment .sub a{
	display: block;
	font-size: 16px;
	line-height: 34px;
	text-align: center;
	width: 88px;
	height: 34px;
	color:#FFFFFF;
	background-color: #f63;
	border-radius: 2px;
}
.main-wrap .mianbody .comment .sub a:hover{
	color: #FFFFFF;
}
</style>